<template>
    <el-row>
        <el-col>
            标题<el-input
                v-model="title"
                style="width: 90%; padding: 0 10px"
                placeholder="Please input"
                clearable
            />
        </el-col>
        <el-col>
            图片<el-input
                v-model="img"
                style="width: 90%; padding:  10px"
                placeholder="Please input"
                clearable
            />
        </el-col>
        <el-col>
            内容<el-input
                v-model="content"
                style="width: 90%; padding: 0 10px"
                placeholder="Please input"
                clearable
            />
        </el-col>
        <el-col>
            是否上架<el-switch
                v-model="judge"
                class="ml-2"
                style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                "
            />
        </el-col>
        <el-col style="text-align: right">
            <el-button @click="cancle">取消</el-button>
            <el-button style="margin-right: 20px" @click="save">保存</el-button>
        </el-col>
    </el-row>
</template>
<script setup>
    import { ref, defineEmits,defineProps } from 'vue'
    const emites = defineEmits(['operate'])
    let props = defineProps({
        jingxuan: {
            type: Object,
            default: () => {
                return {}
            }
        }
    })
    let jingxuans = ref(props.jingxuan)
    let title = ref(jingxuans.value.title)
    let img = ref(jingxuans.value.img)
    let content=ref(jingxuans.value.content)
    let judge = ref(jingxuans.value.del == 1);
    
    const save = function () {
        emites('operate', {
            id:jingxuans.value.id,
            title: title.value,
            img: img.value,
            content: content.value,
            del: judge.value?1:0
        })
        
    }
    const cancle = function () {
        emites('operate')
    }
</script>